<template>
  <div class="color-#fff">
    <div class="flex flex-col gap-40rpx p-10rpx text-28rpx ">
      <div>第一步：划阴阳</div>
      <div v-show="!state.first" class="flex justify-center">
        <div @click="click1" class="inline-block  bg-#fd7e25 border-rd-16rpx p-[30rpx_20rpx] color-#fff">
          点击将49根签随机分成两组
        </div>
      </div>
      <div v-show="state.first" class="flex gap-40rpx">
        <div class="flex-1 min-w-0 flex flex-col gap-20rpx">
          <div class="text-center">
            天： {{ state.firstLeftNum }}
          </div>
          <div class="flex flex-wrap gap-10rpx ">
            <div v-for="item in state.firstLeftNum" :key="item" class="qian" />
          </div>
        </div>
        <div class="flex-1 min-w-0 flex flex-col gap-20rpx">
          <div class="text-center">
            地： {{ state.firstRightNum }}
          </div>
          <div class="flex flex-wrap gap-10rpx ">
            <div v-for="item in state.firstRightNum" :key="item" class="qian" />
          </div>
        </div>
      </div>
      <div class="flex justify-center items-center gap-20rpx">
        不易： <div class="flex gap-10rpx" v-for="(item,index) in state.firstNoMove" :key="index">
          <div v-for="it in item" :key="it" class="qian" />
        </div>
      </div>
      <div class="flex justify-center items-center gap-10rpx">
        左手签数： <div v-for="item in state.firstNum" :key="item" class="qian" />
      </div>
    </div>
    <div v-if="state.first" class="flex flex-col gap-40rpx p-10rpx text-28rpx">
      <div>第二步：分组(按四个为一组,得出剩余数，可能是1，2，3，4)</div>
      <div v-show="!state.second" class="flex justify-center">
        <div @click="click2" class="inline-block  bg-#fd7e25 border-rd-16rpx p-[30rpx_20rpx] color-#fff">
          点击分组
        </div>
      </div>
      <div v-show="state.second" class="flex  gap-40rpx">
        <div class="flex-1 min-w-0 flex flex-col gap-20rpx">
          <div class="text-center">
            余： {{ state.secondLeftNum }}
          </div>
          <div class="flex flex-wrap">
            <div
              :style="{marginRight:(index+1)%4===0?'30rpx':''}"
              v-for="(item,index) in state.firstLeftNum"
              :key="item"
              class="qian m-[0_10rpx_10rpx_0]"
            />
          </div>
        </div>
        <div class="flex-1 min-w-0 flex flex-col gap-20rpx">
          <div class="text-center">
            余： {{ state.secondRightNum }}
          </div>
          <div class="flex flex-wrap">
            <div
              :style="{marginRight:(index+1)%4===0?'30rpx':''}"
              v-for="(item,index) in state.firstRightNum"
              :key="item"
              class="qian  m-[0_10rpx_10rpx_0]"
            />
          </div>
        </div>
      </div>
      <div class="flex justify-center items-center gap-20rpx">
        不易： <div class="flex gap-10rpx" v-for="(item,index) in state.secondNoMove" :key="index">
          <div v-for="it in item" :key="it" class="qian" />
        </div>
      </div>
      <div class="flex justify-center items-center gap-10rpx">
        左手签数({{ state.secondNum }})： <div v-for="item in state.secondNum" :key="item" class="qian" />
      </div>
      <div class="flex justify-center items-center">
        剩下的签数：{{ state.threeAllNum }}
      </div>
    </div>
    <div v-if="state.second" class="flex flex-col gap-40rpx p-10rpx text-28rpx">
      <div>第三步：重新对剩下的签数随机分成两组，然后按四个为一组划分</div>
      <div class="flex justify-center items-center">
        剩下的签数：{{ state.threeAllNum }}
      </div>
      <div v-show="!state.three" class="flex justify-center">
        <div @click="click3" class="inline-block  bg-#fd7e25 border-rd-16rpx p-[30rpx_20rpx] color-#fff">
          点击分组
        </div>
      </div>
      <div v-show="state.three" class="flex  gap-40rpx">
        <div class="flex-1 min-w-0 flex flex-col gap-20rpx">
          <div class="text-center">
            左边： {{ state.threeLeftNum }},余数：{{ state.threeLeftYu }}
          </div>
          <div class="flex flex-wrap">
            <div
              :style="{marginRight:(index+1)%4===0?'30rpx':''}"
              v-for="(item,index) in state.threeLeftNum"
              :key="item"
              class="qian m-[0_10rpx_10rpx_0]"
            />
          </div>
        </div>
        <div class="flex-1 min-w-0 flex flex-col gap-20rpx">
          <div class="text-center">
            右边： {{ state.threeRightNum }},余数：{{ state.threeRightYu }}
          </div>
          <div class="flex flex-wrap">
            <div
              :style="{marginRight:(index+1)%4===0?'30rpx':''}"
              v-for="(item,index) in state.threeRightNum"
              :key="item"
              class="qian m-[0_10rpx_10rpx_0]"
            />
          </div>
        </div>
      </div>
      <div class="flex justify-center items-center gap-20rpx">
        不易： <div class="flex gap-10rpx" v-for="(item,index) in state.threeNoMove" :key="index">
          <div v-for="it in item" :key="it" class="qian" />
        </div>
      </div>
      <div class="flex justify-center items-center gap-10rpx">
        左手签数({{ state.threeNum }})： <div v-for="item in state.threeNum" :key="item" class="qian" />
      </div>
    </div>
    <div v-if="state.three" class="flex flex-col gap-40rpx p-10rpx text-28rpx">
      <div>最后一步：对剩下的签数随机分成两组，然后按四个为一组划分</div>
      <div class="flex justify-center items-center">
        剩下的签数：{{ state.fourAllNum }}
      </div>
      <div v-show="!state.four" class="flex justify-center">
        <div @click="click4" class="inline-block  bg-#fd7e25 border-rd-16rpx p-[30rpx_20rpx] color-#fff">
          点击分组
        </div>
      </div>
      <div v-show="state.four" class="flex  gap-40rpx">
        <div class="flex-1 min-w-0 flex flex-col gap-20rpx">
          <div class="text-center">
            左边： {{ state.fourLeftNum }},余数：{{ state.fourLeftYu }}
          </div>
          <div class="flex flex-wrap">
            <div
              :style="{marginRight:(index+1)%4===0?'30rpx':''}"
              v-for="(item,index) in state.fourLeftNum"
              :key="item"
              class="qian m-[0_10rpx_10rpx_0]"
            />
          </div>
        </div>
        <div class="flex-1 min-w-0 flex flex-col gap-20rpx">
          <div class="text-center">
            右边： {{ state.fourRightNum }},余数：{{ state.fourRightYu }}
          </div>
          <div class="flex flex-wrap">
            <div
              :style="{marginRight:(index+1)%4===0?'30rpx':''}"
              v-for="(item,index) in state.fourRightNum"
              :key="item"
              class="qian m-[0_10rpx_10rpx_0]"
            />
          </div>
        </div>
      </div>
      <div class="flex justify-center items-center gap-20rpx">
        不易： <div class="flex gap-10rpx" v-for="(item,index) in state.fourNoMove" :key="index">
          <div v-for="it in item" :key="it" class="qian" />
        </div>
      </div>
      <div class="flex justify-center items-center gap-10rpx">
        左手签数({{ state.fourNum }})： <div v-for="item in state.fourNum" :key="item" class="qian" />
      </div>
      <div class="flex justify-center">
        得出的卦：{{ state.guaNum }}
      </div>
    </div>
    <div v-if="state.four" class="flex justify-center mb-20rpx">
      <div @click="resetResult" class="inline-block  bg-#fd7e25 border-rd-16rpx p-[30rpx_20rpx] color-#fff">
        计算下一卦
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const randomNum = (number = 49) => {
  let randomNum = Math.floor(Math.random() * number) + 1
  while (number - randomNum === 0) {
    randomNum = Math.floor(Math.random() * number) + 1
  }
  return {
    left: randomNum,
    right: number - randomNum
  }
}

// const randomNum = (number = 49) => {
//   let randomNum = Math.floor(Math.random() * number) + 1
//   let difference = Math.abs(randomNum - (number - randomNum))

//   while (difference > (number / 2)) {
//     randomNum = Math.floor(Math.random() * number) + 1
//     difference = Math.abs(randomNum - (number - randomNum))
//   }
//   return {
//     left: randomNum,
//     right: number - randomNum
//   }
// }

const emit = defineEmits(['result'])

const state = reactive({
  firstNum: 1,
  first: false,
  firstLeftNum: 0,
  firstRightNum: 0,
  firstNoMove: [1],
  secondNum: 1,
  second: false,
  secondNoMove: [1],
  secondLeftNum: 0,
  secondRightNum: 0,
  three: false,
  threeNum: 0,
  threeNoMove: [],
  threeAllNum: 0,
  threeLeftNum: 0,
  threeRightNum: 0,
  threeLeftYu: 0,
  threeRightYu: 0,
  four: false,
  fourNum: 0,
  fourNoMove: [],
  fourAllNum: 0,
  fourLeftNum: 0,
  fourRightNum: 0,
  fourLeftYu: 0,
  fourRightYu: 0,
  guaNum: 0
})

const click1 = () => {
  state.first = true
  const { left, right } = randomNum()
  state.firstLeftNum = left
  state.firstRightNum = right - 1
}
const click2 = () => {
  state.second = true
  state.secondLeftNum = state.firstLeftNum % 4 === 0 ? 4 : state.firstLeftNum % 4
  state.secondRightNum = state.firstRightNum % 4 === 0 ? 4 : state.firstRightNum % 4
  state.secondNum = state.firstNum + state.secondLeftNum + state.secondRightNum
  state.secondNoMove.push(state.secondNum)
  state.threeNoMove = [...state.secondNoMove]
  state.threeAllNum = (state.firstLeftNum - state.secondLeftNum) + (state.firstRightNum - state.secondRightNum)
}
const click3 = () => {
  state.three = true
  const { left, right } = randomNum(state.threeAllNum)
  state.threeLeftNum = left
  state.threeRightNum = right
  state.threeLeftYu = state.threeLeftNum % 4 === 0 ? 4 : state.threeLeftNum % 4
  state.threeRightYu = state.threeRightNum % 4 === 0 ? 4 : state.threeRightNum % 4
  state.threeNum = state.threeLeftYu + state.threeRightYu
  state.threeNoMove.push(state.threeNum)
  state.fourNoMove = [...state.threeNoMove]
  state.fourAllNum = state.threeAllNum - state.threeNum
}
const click4 = () => {
  state.four = true
  const { left, right } = randomNum(state.fourAllNum)
  state.fourLeftNum = left
  state.fourRightNum = right
  state.fourLeftYu = state.fourLeftNum % 4 === 0 ? 4 : state.fourLeftNum % 4
  state.fourRightYu = state.fourRightNum % 4 === 0 ? 4 : state.fourRightNum % 4
  state.fourNum = state.fourLeftYu + state.fourRightYu
  state.fourNoMove.push(state.fourNum)
  state.guaNum = (state.fourLeftNum - state.fourLeftYu) / 4 + (state.fourRightNum - state.fourRightYu) / 4
}

const resetResult = () => {
  emit('result', state.guaNum)
  Object.assign(state, {
    firstNum: 1,
    first: false,
    firstLeftNum: 0,
    firstRightNum: 0,
    firstNoMove: [1],
    secondNum: 1,
    second: false,
    secondNoMove: [1],
    secondLeftNum: 0,
    secondRightNum: 0,
    three: false,
    threeNum: 0,
    threeNoMove: [],
    threeAllNum: 0,
    threeLeftNum: 0,
    threeRightNum: 0,
    threeLeftYu: 0,
    threeRightYu: 0,
    four: false,
    fourNum: 0,
    fourNoMove: [],
    fourAllNum: 0,
    fourLeftNum: 0,
    fourRightNum: 0,
    fourLeftYu: 0,
    fourRightYu: 0,
    guaNum: 0
  })
}
</script>

<style lang="scss" scoped>
.qian {
  width: 4px;
  height: 40px;
  border-radius: 8rpx;
  background-color: #ffffff;
}
</style>
